<template>
  <view class="box">
    <dao title="售后详情" color="#fff" :left="true" />
    <!-- <quan v-if="true" /> -->

   <view class="sdsdax">

    <uni-card >

            

<view style="color: #000;">
    <view style="font-size:34rpx; display: flex;align-items: center;"> 
      <image style="width: 40rpx;
  height: 40rpx;" src="../../static/个人.png" >
    
  </image>申请信息</view>

<view style="margin-top:20rpx">

<view>店名：{{ arr.StoreName }}</view>
<view>姓名：{{ arr.ContactName }}</view>
<view>电话：{{ arr.ContactPhone }}</view>
<view>所在地区：{{ arr.StoreAddress }}</view>
<view>详细地址：{{ arr.StoreDetailAddress }}</view>
<view>设备铭牌照片：<uv-album v-if="arr.IotIDTagFilepath.length"
  :urls="arr.IotIDTagFilepath"
  singleMode="aspectFill"

   multipleSize="128rpx" singleSize="128rpx" space="8rpx" ></uv-album></view>
<view>故障描述：{{ arr.IotIDFaultDescription }}</view>
<view v-if="images.length" class="sdsds"><uv-album
   :urls="images"  singleMode="aspectFill"

multipleSize="128rpx" singleSize="128rpx" space="8rpx"></uv-album>
  </view>



<view style="margin-top: 30rpx;">
  <video v-if="videos.length"
  style="width:280rpx"
  id="myVideo"
  :src="videos[0]"
  controls

></video>
</view>




</view>
</view>

            </uni-card>

 <uni-card>
  <view style="color: #000;">
    <view  style="font-size:34rpx; display: flex;align-items: center;color: #000;"> 
      <image style="width: 35rpx;
  height: 35rpx;" src="../../static/记录.png" >
    
  </image>售后信息</view>

  <view style="margin-top:20rpx">

<view>工单号：{{ arr.Number }}</view>
<view>是否在保：{{ arr.IsWarranty }}</view>
<view>工单状态：{{ arr.Status }}</view>


  </view>





</view>

 </uni-card>


 <uni-card>
  <view style="color: #000;">
    <view  style="font-size:34rpx; display: flex;align-items: center;color: #000;"> 
      <image style="width: 35rpx;
  height: 35rpx;" src="../../static/维修.png" >
    
  </image>维修信息</view>

  <view style="margin-top:20rpx">

<view>维修建议：{{ arr.Suggestions }}</view>
<view v-if="arr.SuggestionsFilepath.length" class="sdsds"><uv-album
   :urls="arr.SuggestionsFilepath" multipleSize="128rpx" space="8rpx"></uv-album>
  </view>


  </view>





</view>

 </uni-card>



     <view style="height: 46rpx;"></view>


   </view>
  </view>
</template>

<script setup >
import {getxsshoude} from '../../api/login'
import upload from '../../components/upload.vue'
import dao from "../../pages/conpments/daohang.vue";
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

import { useCounterStore } from "../../stores/counter";
import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
const arr=ref({
  "Number": "",
  "IotID": '',
  "IotIDTagFilepath": [],
  "IotIDFaultDescription": "",
  "IotIDFaultDescriptionFilepath":[],
  "StoreName": "",
  "StoreAddress": "",
  "StoreDetailAddress": "",
  "ContactName": "",
  "ContactPhone": "",
  "IsWarranty": "",
  "Status": "",
  "Suggestions": "",
  SuggestionsFilepath:[]})
onShow(async ()=>{


})
const videos =ref([]);
const images = ref([]);
const bu=ref(false)
onLoad(async (option)=>{
console.log(option.id);
  const {data}= await getxsshoude(option.id)
  arr.value=data.data
  bu.value=true
//  arr.value.IotIDTagFilepath=arr.value.IotIDTagFilepath
if(arr.value.IotIDFaultDescriptionFilepath.length){
  
  // 遍历文件URL列表
  arr.value.IotIDFaultDescriptionFilepath.forEach(url => {
  // 获取文件的后缀名（从最后一个点开始到字符串结束）
  const extension = url.split('.').pop().toLowerCase();
  // 根据后缀名将文件放入相应的数组
  if (['mp4', 'avi', 'mov', 'webm', 'mkv'].includes(extension)) {
    videos.value.push(url);
  } else if (['jpg', 'png', 'gif', 'jpeg', 'bmp'].includes(extension)) {
    images.value.push(url);
  }
  // 如果需要支持更多格式，可以在上面的数组中添加相应的后缀名
});
}

 


})


</script>

<style scoped lang="scss">
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
.ferf{text-align: right;

color: #606266;}

.sdsdax{

width: 100%;
margin-top:20rpx;
padding-top: 20rpx;
height: calc(100vh - 222rpx);
overflow-y: scroll;
box-sizing: border-box;
}



:deep(.uni-forms-item__error){
  text-align: right;
  
}
:deep(.uni-easyinput__content-input){
  text-align: right;
}
:deep(.uni-select__input-placeholder){
  text-align: right;
  color: #606266 !important;
}
:deep(.uni-easyinput__placeholder-class) {
    text-align: right;
    /* 如有需要，可以添加额外的样式，如颜色等 */
}

.box {
  height: 50vh;
  background: linear-gradient(
    180deg,
    $uni-primary 0%,
    rgba(216, 237, 232, 0.43) 61.6%,
    rgba(217, 217, 217, 0) 100%
  );
}



</style>